<?php /*a:3:{s:41:"E:\phpthink\work\tp\view\admin\index.html";i:1652852059;s:18:"common/header.html";i:1652874600;s:18:"common/footer.html";i:1652023572;}*/ ?>


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>图书馆管理系统</title>
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="http://127.0.0.1:8000/layui/css/layui.css">
  <link rel="stylesheet" href="http://127.0.0.1:8000/layer/layer.js">
  <!-- 引入 layui.js -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="http://127.0.0.1:8000/static/index.css">
  <script src="http://127.0.0.1:8000/layui/layui.js"></script>
  <link href="http://127.0.0.1:8000/bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
  <script src="http://127.0.0.1:8000/jquery-3.6.0.min.js"></script>
  <script src="http://127.0.0.1:8000/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
  <script src="http://127.0.0.1:8000/echarts.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">图书管理系统</div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item"><a href="#"><?php echo session("username"); ?>&nbsp;已登录</a></li>
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          更多操作
        </a>
        <dl class="layui-nav-child">
          <dd><a href="signOut">退出登录</a></dd>
        </dl>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">账号管理</a>
          <dl class="layui-nav-child">
            <dd><a href="/admin">账号列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">权限管理</a>
          <dl class="layui-nav-child">
            <dd><a href="/rights">权限管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">图书管理</a>
          <dl class="layui-nav-child">
            <dd><a href="/booklist">图书列表</a></dd>
            <dd><a href="/category">图书分类</a></dd>
            <dd><a href="/publisher">供应商</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">借阅管理</a>
          <dl class="layui-nav-child">
            <dd><a href="/lend">超时列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">数据统计</a>
          <dl class="layui-nav-child">
            <dd><a href="/reports">数据报表</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
<!-- 内容主体区域 -->
<div class="layui-body">
  <!--        <div style="padding: 15px;"><h1 style="font-weight: 700">欢迎界面</h1></div>-->
  <div id="user_container" style="padding: 15px;">
    <!--            面包屑导航-->
    <span class="layui-breadcrumb">
              <a href="#" style="font-weight: 700;color: #000!important;">首页</a>
              <a href="#" style="font-weight: 700;color: #000!important;">用户管理</a>
              <a href="" >用户列表</a>
            </span>
    <div class="layui-row layui-col-space15" style="margin-top: 15px">
      <div class="layui-col-md12">
        <div class="layui-panel" style="padding: 20px">
          <div class="layui-form-item">
            <div class="layui-input-block">
              <input id="searchVal" style="float: left" type="text" placeholder="请输入名称查找" autocomplete="off" class="layui-input">
              <button id="search" style="float: left;margin-left: -1px;outline: none;" type="button" class="layui-btn  "><i class="layui-icon layui-icon-search"></i></button>
              <button data-target="#myModal" data-toggle="modal"  id="addUsers" type="button" style="border-radius: 5px;width: 90px;cursor:pointer;margin-left: 20px;" class="layui-btn layui-btn-radius layui-btn-normal">添加用户</button>
            </div>
          </div>
          <table lay-filter="adminTable"  class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        </div>
      </div>
    </div>
  </div>
</div>
</div>


<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label for="inputUsername" class="col-sm-2 control-label">用户名:</label>
            <div class="col-sm-10">
              <input name="name" type="text" placeholder="请输入用户名" class="form-control" id="inputUsername" disabled="disabled">
            </div>
          </div>
          <input type="hidden" name="id">
          <div class="form-group adminPwd" id="adminPwd"  >
            <label for="inputPassword" class="col-sm-2 control-label">密码:</label>
            <div class="col-sm-10">
              <input type="text" name = "password" class="form-control" id="inputPassword" placeholder="请输入密码">
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmile" class="col-sm-2 control-label">邮箱:</label>
            <div class="col-sm-10">
              <input type="email" name="email" class="form-control" id="inputEmile" placeholder="请输入邮箱">
            </div>
          </div>
          <div class="form-group">
            <label for="inputMoble" class="col-sm-2 control-label">电话:</label>
            <div class="col-sm-10">
              <input type="text" name="mobile" class="form-control" id="inputMoble" placeholder="请输入电话">
            </div>
          </div>
          <div class="form-group" id="roleList" style="display: none">
            <label  class="col-sm-2 control-label">角色:</label>
            <div class="col-sm-10">
              <select class="form-control" id = "roleValue">
                <option>超级管理员</option>
                <option>主管</option>
              </select>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="sureBtn" data-dismiss="modal" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>

<!--操作模板字符-->
<script type="text/html" id="currentTableBar">
  <a data-target="#myModal" data-toggle="modal" class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="edit"> <i class="layui-icon layui-icon-edit"></i></a>
  <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></a>
</script>

<!--状态模板字符-->
<script type="text/html" id="switchOnOff">
  <input type="checkbox" mid={{d.id}}  name="isManager"
         lay-skin="switch"
         {{d.state===1?"checked":''}}
         lay-filter="switchTest"
         >
</script>


<script>
  document.querySelector('.layui-nav-itemed').classList.remove('layui-nav-itemed');
  $('a[href$=admin]').parent()[0].classList.add('layui-this');
  $('a[href$=admin]').parent().parent().parent()[0].classList.add('layui-nav-itemed');

  var formhorizontal  = document.querySelector('.form-horizontal')
  var sureBtn = document.getElementById('sureBtn');
  layui.use(['form', 'table'], function () {
    var $ = layui.jquery,
     form = layui.form,
    table = layui.table;

    // 更新用户状态
    form.on('switch(switchTest)', async function(obj){
      var id = $(this).attr('mid');
      // console.info('id:' + id);
      var isManager = obj.elem.checked?"1":"0";
      // console.info('isManager:' + isManager);
      const {data:res} = await axios.post('/admin/editState',{
        state:isManager,
        id:id})

      if(res.state!==200) {
        return layer.msg(res.message,
                {icon: 0, time: 1000})
      }
        layer.msg('更改成功', {
          icon: 1,
          time: 1500
        })
    })

    // 顶部搜索逻辑
    var search = document.getElementById('search');
    var searchVal = document.getElementById('searchVal');

    search.addEventListener('click',function () {
      console.log(searchVal.value)
      table.reload('adminTable', {
        where: { //设定异步数据接口的额外参数，任意设
          name: searchVal.value
        }
        ,page: {
          curr: 1 //重新从第 1 页开始
        }
      });
    })




    // 渲染表格
    table.render({
      elem: '#currentTableId',
      limit:4
      ,url: "<?php echo url('admin/article'); ?>" //数据接口
      ,page: true //开启分页
      ,limits:[2,4,6,8]
      ,skin: 'row,line'
      ,id:'adminTable'
      ,cols: [[ //表头
        // {type: "checkbox", },
        {field: 'id',align:"center", width: 80, title: 'ID', sort: true},
        {field: 'name',align:"center", title: '名称'},
        {field: 'email', align:"center",title: '名称'},
        {field: 'mobile',align:"center", title: '电话'},
        {field: 'role', align:"center",title: '角色'},
        {field: 'state', align:"center",title: '状态',  toolbar: '#switchOnOff'
        },
        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
      ]],

    });




    // 添加用户信息表格
     var addUsers = document.getElementById('addUsers');
     var myModalLabel = document.getElementById('myModalLabel');
     var adminPwd = document.getElementById('adminPwd');
     var inputUsername = document.getElementById('inputUsername');
     var tableReload = table.reload;
     var roleValue = document.getElementById('roleValue');
     var roleList = document.getElementById('roleList');
    var inputEmile1 = document.getElementById('inputEmile');
     addUsers.addEventListener('click', function (){
       formhorizontal.reset();
       myModalLabel.innerHTML = '添加用户';
       roleList.style.display = 'none';
       adminPwd.style.display="block";
       inputEmile1.disabled = "";
       inputMoble.disabled = "";
       inputUsername.disabled = "";
       sureBtn.dataset.sureType = 'add'
      })
    sureBtn.addEventListener('click',async function (e) {
      if(sureBtn.dataset.sureType === 'add') {
        const {data: res} = await axios.post('/admin/addAdmin', {
          name: formhorizontal.name.value,
          password: formhorizontal.password.value,
          email: formhorizontal.email.value,
          mobile: formhorizontal.mobile.value,
          create_at: new Date().valueOf()
        })
        // console.log(res)
        if (res.state !== 200) {
          return layer.msg(res.message, {
            icon: 0,
            time: 1000
          })
        }
        table.reload('adminTable', {});
        layer.msg('添加成功', {
          icon: 1,
          time: 1500
        })
      }else{
        const {data:res} = await axios.post('/admin/edit',{
                 email:inputEmile1.value,
                 mobile:inputMoble.value,
                 role:roleValue.value,
                 id:formhorizontal.id.value
               })
        if(res.state!==200){
                return layer.msg(res.message, {
                   icon: 0,
                  time: 1000
                })}
        table.reload('adminTable', {});
        layer.msg('更改成功', {
                      icon: 1,
               time: 1500
               })
      }
    })
    // 编辑删除绑定事件
    table.on('tool(adminTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      if(layEvent === 'delete'){ //删除
        if (data.role==="超级管理员"){
          return  layer.msg('超级管理员不能删除', {
            icon: 0,
            time: 1000
          })
        }
        layer.confirm('该操作将会永久删除该用户是否继续？',{icon: 3, title:'提示'}, async function(index){
          await axios.get(`/admin/delete?id=${data.id}`)
          table.reload('adminTable', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
          });
          layer.close(index);
          //向服务端发送删除指令
        });
      } else if(layEvent === 'edit'){
        //编辑
        //do something
            sureBtn.dataset.sureType = 'edit'
            // console.log(sureBtn.dataset.sureType)
            adminPwd.style.display="none";
            inputUsername.disabled = "disabled";
            inputUsername.value = data.name;
            inputEmile1.value = data.email;
            inputMoble.value = data.mobile;
            myModalLabel.innerHTML = '修改信息';
            formhorizontal.id.value = data.id
            if (data.role!=="超级管理员"){
              inputEmile1.disabled = "";
              inputMoble.disabled = "";
              roleList.style.display = 'block';
            }else{
              inputEmile1.disabled = "disabled";
              inputMoble.disabled = "disabled";
              roleList.style.display = 'none';
            }
      }
    });

  });




</script>



</body>

</html>
